// import "suneditor/dist/css/suneditor.min.css";
// import "katex/dist/katex.min.css";
import { useContext, useEffect, useState } from "react";
import { Editor, Toolbar } from "@wangeditor/editor-for-react";
import { IDomEditor, IEditorConfig, IToolbarConfig } from "@wangeditor/editor";
// import "@wangeditor/editor/dist/css/style.css"; // 引入 css
import { AppContext } from "..";
import { message } from "antd";
import "./external.less";
// import './index.less'
interface RichTextProps {
  value?: string;
  action?: string;
  fileUploadData?: any;
  disabled?: boolean;
  onChange?: (html: string) => any;
}
const RichText = ({
  value,
  action,
  fileUploadData,
  disabled,
  onChange,
}: RichTextProps) => {
  const { commonHeaders, richText, apiPrefix, upload } = useContext(AppContext);
  // editor 实例
  const [editor, setEditor] = useState<IDomEditor | null>(null); // TS 语法
  // const [editor, setEditor] = useState(null)                   // JS 语法

  // 编辑器内容
  const [html, setHtml] = useState("");

  // 模拟 ajax 请求，异步设置 html
  useEffect(() => {
    // setTimeout(() => {
    setHtml(value);
    // }, 1500)
  }, [value]);

  // 工具栏配置
  const toolbarConfig: Partial<IToolbarConfig> = {}; // TS 语法
  // const toolbarConfig = { }                        // JS 语法
//   console.log("apiPrefix+ action,", commonHeaders);
  // 编辑器配置
  const editorConfig: Partial<IEditorConfig> = {
    // TS 语法
    // const editorConfig = {                         // JS 语法
    placeholder: "请输入内容...",
    MENU_CONF: {
      uploadImage: {
        // 自定义插入图片
        customInsert(res: any, insertFn: Function) {
          
         
          if (richText) {
            const { fileUrlResultFormat } = richText;
            const url = fileUrlResultFormat(res);
            // 从 res 中找到 url alt href ，然后插入图片
            insertFn(url, "alt", url);
          } else {
            
            insertFn(res.data.fileUrl, "alt", res.data.fileUrl);
          }
        },
        onBeforeUpload(file: File) {
          message.loading({
            type: "loading",
            content: "正在上传...",
            key: "file_upload",
          });
        },
        onSuccess() {
          message.destroy("file_upload");
        },
        onError() {
          message.destroy("file_upload");
        },
        fieldName: "file",
        meta: fileUploadData,
        maxFileSize: 10 * 1024 * 1024, // 1M
        base64LimitSize: 5 * 1024, // 5kb
        server: apiPrefix + upload.action,
        headers: {
          ...commonHeaders,
        },
      },
    },
  };

  // 及时销毁 editor ，重要！
  useEffect(() => {
    if (editor) {
      disabled ? editor.disable() : editor.enable();
    }

    return () => {
      if (editor == null) return;
      editor.destroy();
      setEditor(null);
    };
  }, [editor, disabled]);
  const _onChange = (editor) => {
    const html = editor.getHtml();
    onChange && onChange(html);
    setHtml(html);
  };
  return (
    <div className="rich-text-container">
      <Toolbar
        editor={editor}
        defaultConfig={toolbarConfig}
        mode="default"
        style={{ borderBottom: "1px solid #f1f1f1" }}
      />
      <Editor
        defaultConfig={editorConfig}
        value={html}
        onCreated={setEditor}
        onChange={_onChange}
        mode="default"
        style={{ height: "500px", overflowY: "hidden" }}
      />
    </div>
  );
};
export const richTextToHtml = (s: any) => "";
export default RichText;
